﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="NestedGridView._Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
    .collapsed-row {
        display:none;
        padding:0px;
        margin:0px;
    }
</style>
<script type="text/javascript">
    function ToggleGridPanel(btn, row) {
        var current = $('#' + row).css('display');
        if (current == 'none') {
            $('#' + row).show();
            $(btn).removeClass('glyphicon-plus')
            $(btn).addClass('glyphicon-minus')
        } else {
            $('#' + row).hide();
            $(btn).removeClass('glyphicon-minus')
            $(btn).addClass('glyphicon-plus')
        }
        return false;
    }
</script>
</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<asp:GridView ID="gvCustomers" runat="server"
    DataKeyNames="CustomerID"
    Width="100%"
    GridLines="None"
    AutoGenerateColumns="false"
    OnRowDataBound="gvCustomers_RowDataBound"
    >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <button class="btn btn-default glyphicon glyphicon-plus" onclick="return ToggleGridPanel(this, 'tr<%# Eval("CustomerID") %>')" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CustomerID" HeaderText="ID" />
        <asp:BoundField DataField="ContactName" HeaderText="Customer" />
        <asp:BoundField DataField="Address" HeaderText="Address" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:TemplateField HeaderText="Phone">
            <ItemTemplate>
                <%# Eval("Phone") %>
                <%# MyNewRow(Eval("CustomerID")) %>  
                    <asp:GridView ID="gvOrders" runat="server"
                        Width="100%"
                        GridLines="None"
                        AutoGenerateColumns="false"
                        DataKeyNames="CustomerID"
                        >
                        <Columns>
                            <asp:BoundField DataField="OrderID" HeaderText="Order ID" />
                            <asp:BoundField DataField="OrderDate" HeaderText="Order Date" 
                                DataFormatString="{0:MM-dd-yy}" />
                            <asp:BoundField DataField="ShippedDate" HeaderText="Shipped On" 
                                DataFormatString="{0:MM-dd-yy}" />
                            <asp:BoundField DataField="ShipName" HeaderText="Ship To Name" />
                            <asp:BoundField DataField="ShipCity" HeaderText="City" />
                        </Columns>
                    </asp:GridView>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
</asp:Content>
